<!--悬浮页脚，会自动占80px高度-->
<template>
  <div>
    <div class="c-footer-releative"></div>
    <div class="c-footer-absolute" :style="{width:width+'px'}">
      <div>
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AntFooter',
  data() {
    return {
      width: 1000
    }
  },
  mounted() {
    const app = document.getElementById('app')
    const rootRo = new ResizeObserver(entries => {
      this.width = app.getBoundingClientRect().width
    })
    rootRo.observe(app)
  }
}
</script>

<style lang="less" scoped>
// 相对占位 - 自动预留出适当位置，避免内容被遮盖
.c-footer-releative{
  width:100%;
  height: 80px;
}
//绝对占位 - 页脚内容显示区域
.c-footer-absolute{
  position: absolute;
  height: 80px;
  left:0px;
  bottom: 0px;
  margin-left:-20px;
  background: #F6F6F6;
  z-index: 999;
  div{
    margin-top:20px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: #FFFFFF;
    box-shadow: 0px -3px 6px 1px rgba(0,0,0,0.08);
  }
}
</style>
